<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

   
    <link rel="stylesheet" href="tabbar.css">

    <link rel="stylesheet" href="content-card.css">

    <title>视频</title>

</head>



<body>

    <div class="nav">

        <include file="public/header" />

    </div>

    <!-- 搜索开始 -->

    <div class="search">

        <form action="{:url('index/index')}" method="POST" class="formBOX">

            <input class="searchInput" placeholder="请输入搜索内容" type="text" name="keyword"/>

            <button class="searchBtn" id="searchForm" type="submit">

                <img src="/static/images/search.png" alt="">

                <span>搜索</span>

            </button>

        </form>

    </div>

    <!-- 分类开始 -->

    <div class="select">

        <form action="{:url('index/index','action=search')}" method="POST">

            <div class="row1">

                <volist name="catelist" id="cate">

                <div class="industryType">

                    <div style="width:60px; font-size:12px;">{$cate.cate_name}:</div>

                    <div class="box">

                        <div class="qrm-pinming">

                            <div class="qrm-input-border">

                                <input name="input{$cate.cate_id}" type="text" readonly="readonly" placeholder="按{$cate.cate_name}筛选" class="qrm-input" style="width: 250px">

                            </div>

                            <div class="qrm-border1" style="display:none">

                                <ul class="qrm-lev-1 qrm-lev">

                                    <volist name="cate.list" id="ccate">

                                    <li class="">

                                        <span>{$ccate.cate_name}</span><eq name="cate.child_num" value="2"><i class="qrm-arrow-right"></i></eq>

                                        <ul class="li-zi-1" style="display: none">

                                            <volist name="ccate.list" id="cccate">

                                            <li><span>{$cccate.cate_name}</span></li>

                                             </volist>

                                        </ul>

                                    </li>

                                    </volist>

                                </ul>

                                <p class="clearfix"></p>

                            </div>

                            <for start="1" end="$cate.child_num">

                            <div class="qrm-border2" style="display:none">

                                <ul class="qrm-lev-2 qrm-lev">

                                </ul>

                                <p class="clearfix"></p>

                            </div>

                            </for>

                            <for start="1" end="$cate.child_num">

                            <p class="clearfix"></p>

                            </for>

                        </div>

                    </div>

                </div>

             </volist>

                <div class="industryType rowWidth">

                    <div style="width:48px; font-size:12px;">价 格:</div>

                    <input type="number" class="textz" placeholder="输入价格" list="sexlist" name="price1"/>- <input type="number" class="textz" placeholder="输入价格" list="sexlist"  name="price2"/>

                </div>
                <div class="videozw"></div>

            </div>

            <div class="row1 m30">

                <button class=" searchBtn typeSearch m0" type="submit">

                    <img src="/static/images/search.png" alt="">

                    <span>搜索</span>

                </button>

            </div>

        </form>

    </div>

    <!-- 素材开始 -->

    <div class="source">

        <p class="sourceTitle">近7天更新素材</p>

         <div id="video-list" class="profile-works">

            <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4 row-cols-xxl-5 row-cols-xxxl-6">

                <volist name="list" id="video">

                <div class="col">

                    <div class="card">

                        <div class="video-card" data-columns="10" data-count="60" data-lines="6"

                            style='background-image: url("4.jpg");'>

                            <a href="{:url('index/videoDetail','art_id='.$video['art_id'])}" target="_blank">

                                <img src="{$video.image_thumb}"  class="video-cover" alt="{$video.title}">

                            </a>

                            <a href="{:url('index/videoDetail','art_id='.$video['art_id'])}" target="_blank">

                            <div class="video-controlar">

                                <div class="btn-icon-play"><i  class="tbfont iconfont icon-btn-icon-play">&#xe72b;</i>

                                </div>

                                <!-- <div class="controllar-top">

                                    <div class="fav-controlar">

                                        <div class="btn-icon-fav">

                                            <i class="tbfont icon-btn-icon-fav"></i>

                                        </div>

                                    </div>

                                </div> -->

                                <div class="time-length">

                                    <p>{$video.duration}</p>

                                </div>

                            </div>

                            <div class="card-line"></div>

                            </a>

                        </div>

                        <div class="card-body">

                            <a href="{:url('index/videoDetail','art_id='.$video['art_id'])}" target="_blank">

                                <h6 class="card-title ellipsis">{$video.title}</h6>

                            </a>

                        <p class="type">

                            <volist name="video.tags" id="vo" offset="0" length='1'>

                            <span style="float: left;">{$vo}</span>

                            </volist>

                            <volist name="video.tags" id="vo" offset="1" length='1'>

                            <span style="float: right;">{$vo}</span>

                            </volist>

                        </p>

                        </div>

                    </div> 

                </div>

                </volist>  

            </div>

            <div style="clear: both;"></div>

        </div>

    </div>

    <!-- 分页开始 -->

    <div class="page">{$page}</div>

    <!-- 底部开始 -->

    <include file="public/footer" />

    <script src="jquery.min.js"></script>

    <script src="/static/js/qrm-pinming.js"></script>

    <script src="/static/layui/layui.all.js"></script>

    <script src="singleframe.js"></script>

    <script>

        var flag = 1;

        var myflag = 1;

        var timer = null;



        $(".creative").click(function () {

            if (flag == 1) {

                $(this).find(".downBox").slideDown();

                $(".creativeRight").css({

                    "transform": "rotate(180deg)"

                })

                flag = 0;

            }

            else {

                $(this).find(".downBox").slideUp();

                $(".creativeRight").css({

                    "transform": "rotate(360deg)"

                })

                flag = 1;

            }

        })

         // 我的鼠标事件

         $(".navRight").mouseenter(function () {

                var that = $(this)

                if (timer) {

                    clearTimeout(timer);

                }

                timer = setTimeout(function (){

                    that.find(".mydownbox").slideDown();

                },100);     

        })

        $(".navRight"). mouseleave(function(){

            $(this).find(".mydownbox").slideUp();
            clearTimeout(timer);

        })



        // 打开关闭select选择框

        $(".industryType").click(function () {

            var btnCss = $(".selectList").css("display")

            if (btnCss !== "block") {

                $(".selectList").css({

                    "display": "block",

                })

            } else {

                $(".selectList").css({

                    "display": "none",

                })

            }



        })



        //分类选择鼠标hover时改变背景色区分

        $(function () {

            $(".selectList").hover(function () {

                $(this).parent().find(".towType").show();

            }, function () {

                $(this).parent().find(".towType").hide();

            })

        });

    </script>

</body>

</html>